
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hệ thống quản lí thuốc online</title>
</head>
<body>
	<div id="wrapper">
		<%@ include file="../../layout/menubar.jsp"%>
		<%@ include file="../../layout/left-menu.jsp"%>
		<%@ include file="../../layout/header.jsp"%>
		<div id="page-wrapper">
			<div class="page-content">

				<!-- begin PAGE TITLE ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="page-title">
							<ol class="breadcrumb">
								<li><i class="fa fa-dashboard"></i> <a href="">Quản lí
										thuốc</a></li>
							</ol>
						</div>
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
				<!-- end PAGE TITLE ROW -->
				<!-- begin ADVANCED TABLES ROW -->
				<div class="row">
					<div class="col-lg-12">
						<div class="portlet portlet-default">
							<div class="portlet-heading">
								<div class="portlet-title">
									<h4>Danh sách thuốc</h4>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="portlet-body">
								<div class="table-responsive">
									<div class="row form-group">
										<div class="col-sm-6 col-xs-12">
											<form action="search">
												<label>Tìm kiếm theo tên: </label> <input type="text"
													style="width: 200px; display: inline;" class="form-control"
													placeholder="Tên thuốc" name="searchKey" id="searchKey"
													value="${searchKey}">
												<button type="submit" class="btn btn-square btn-primary"
													style="width: 100px; margin-left: 20px;">Tìm</button>
											</form>
										</div>
										<div class="col-sm-6 col-xs-12">
											<form action="staffviewmedicine">
												<input type="hidden" value="listAllData" name="listAll" />
												<button type="submit"
													class="btn btn-default pull-right btn-square">
													<span class="glyphicon glyphicon-plus"></span>&nbsp;Hiển
													thị tất cả
												</button>
											</form>

										</div>
									</div>
									<table id="example-table"
										class="table table-striped table-bordered table-hover table-green">
										<thead>
											<tr>
												<th>STT</th>
												<th>Tên</th>
												<th>Nhà sản xuất</th>
												<th>Giá</th>
												<th>Số lượng</th>
<!-- 												<th>Thành phần</th> -->
											</tr>
										</thead>
										<tbody id='tableBody'>
											<%
												int i = 0;
											%>
											<c:forEach var="medicine" items="${medicines}">
												<tr>
													<%
														i++;
													%>
													<td><%=i%></td>
													<td>${medicine.getName()}
													</td>
													<td>${medicine.getDescription()}</td>
													<td>${medicine.getPrice()}</td>
													<td>${medicine.getQuantity()}</td>
<!-- 													<td> -->
<%-- 														<c:forEach var="inGradient" items="${medicine.getGradients()}"> --%>
<%-- 															<p>${inGradient.getName()}</p> --%>
<%-- 														</c:forEach> --%>
<!-- 													</td> -->
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
								<!-- /.table-responsive -->
							</div>
							<!-- /.portlet-body -->
							<div class="portlet-footer">
								<div class="clearfix"></div>
							</div>
							<!-- /.portlet-footer -->
						</div>
						<!-- /.portlet -->
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.page-content -->
		</div>
		<!-- /#page-wrapper -->
		<!-- end MAIN PAGE CONTENT -->
	</div>
	<!-- Modal add user -->
</body>
<script type="text/javascript">
	function search(){
		var searchKey = document.getElementById("searchKey").value;
		var bytes = [];
		for (var i = 0; i < searchKey.length; ++i)
		{
		    bytes.push(searchKey.charCodeAt(i));
		}
		searchKey = bytes + "";
		var html = "";
		$.ajax({
			cache: false,
			type: "GET",
			url: "search",
			data: {"searchKey":searchKey},
			success: function (data) {
				alert("search = "+ searchKey);
				data= JSON.parse(data);
				html += "<tbody id='tableBody'>";
				for(var i=0 ; i < data.length ; i++){
					html += "<tr>";
					html += "<td>"+ i+1+ "</td>";
					html += "<td><a href='' data-toggle='modal'";
					html += "data-target='#modalUpdate'";
					html += "onclick=editButtonTouched("+ data[i].id+",'"+ data[i].name+"','"+data[i].description+"','"+data[i].price+"','"+data[i].quantity+"')>"+ data[i].name+"</a></td>";
					html += "<td>"+ data[i].description+"</td>";
					html += "<td>"+ data[i].price+"</td>";
					html += "<td>"+ data[i].quantity+"</td>";
					html += "<td>image</td>";
					html += "</tr>";
				}
				html += "</tbody>";
				document.getElementById("tableBody").innerHTML=html;
			},
			error: function(data){
				alert("error");
			}
		});
	};
</script>
</html>
